<template>
  <div class="dataview">
    <div class="topbox">
      <h1>设备数据分析</h1>
    </div>
    <div class="middlebox">
      <div class="row0">
        <div class="title">
          <h1>设备排查信息</h1>
        </div>
        <div class="title">
          <h1>厂家设备损毁率</h1>
        </div>

        <div class="title">
          <h1>设备分类占比</h1>
        </div>
      </div>
      <div class="row">
        <div class="panel">
          <el-row>
            <el-col :span="12" :offset="12">
              <el-input
                style="width: 150px"
                size="mini"
                v-model="barParam"
                placeholder="请输入设备名"
              ></el-input>
              &nbsp;
              <el-button
                icon="el-icon-search"
                type="primary"
                size="mini"
                circle
                @click="getBarSeries()"
              ></el-button
            ></el-col>
          </el-row>
          <div class="chart" id="bar" style="height: 290px"></div>
          <div class="panel-footer"></div>
        </div>

        <div class="panel">
          <div class="chart" id="line1"></div>

          <div class="panel-footer"></div>
        </div>

        <div class="panel">
          <div class="chart" id="pie"></div>

          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
    <div class="bottombox">
      <div class="buttom-title">
        <h1>历次排查设备损耗率</h1>
      </div>
      <div class="buttom-row">
        <div class="space"></div>
        <div class="bottom-panel">
          <div class="buttom-chart" id="line2"></div>
        </div>
        <div class="space"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import * as echarts from "echarts";
export default {
  data() {
    return {
      barParam: "",
    };
  },
  methods: {
    getBarSeries() {
      this.$axios
        .get("/dataAnalysis/getBarSeries/" + this.barParam)
        .then((respData) => {
          console.log(respData);
          this.initBar(respData.data.data);
        });
    },
    initBar(seriesData) {
      let barecharts = echarts.init(document.getElementById("bar"));

      barecharts.setOption({
        xAxis: {
          type: "category",
          data: ["正常", "一级损耗", "二级损耗", "三级损耗", "总排查次数"],
          axisLabel: {
            color: "rgba(255,255,255,0.6)",
            fontSize: "12px",
          },
          // x轴线的样式
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
              width: 10,
              type: "solid",
            },
            show: false,
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          //y轴线样式
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.6)",
            },
          },
          // y轴分割线样式
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
        },
        series: [
          {
            data: seriesData,
            barWidth: "35%",
            type: "bar",
            itemStyle: {
              //圆角弧度
              barBorderRadius: 5,
            },
          },
        ],
      });
    },
    getLineSeries1() {
      this.$axios.get("/dataAnalysis/getLineSeries").then((respData) => {
        // console.log(respData);
        const data = respData.data.data;

        let xdata = data.map((item) => item.manufacturer);
        let ydata = data.map((item) => item.data);
        let ydata0 = ydata.map((item) => item[0] * 100);
        let ydata1 = ydata.map((item) => item[1] * 100);
        let ydata2 = ydata.map((item) => item[2] * 100);
        console.log(xdata);
        console.log(ydata0);
        console.log(ydata1);
        console.log(ydata2);

        this.initLine1(xdata, ydata0, ydata1, ydata2);
      });
    },
    initLine1(xdata, ydata0, ydata1, ydata2) {
      let lineecharts1 = echarts.init(document.getElementById("line1"));

      lineecharts1.setOption({
        //X轴
        xAxis: {
          type: "category",
          data: xdata,
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },

        //y轴
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}%",
          },
          //分割线
          splitLine: {
            //线样式
            lineStyle: {
              color: "#012f4a",
            },
          },
        },
        series: [
          {
            name: "未损坏",
            data: ydata0,
            type: "line",
            smooth: true,
          },
          {
            name: "轻微损耗",
            data: ydata1,
            type: "line",
            smooth: true,
          },
          {
            name: "严重损耗",
            data: ydata2,
            type: "line",
            smooth: true,
          },
        ],

        legend: {
          data: ["未损坏", "轻微损耗", "严重损耗"],
          // right: "10%",
          textStyle: {
            color: "rgba(255,255,255,0.5)",
            fontSize: "10px",
          },
        },
        //小工具箱
        toolbox: {
          show: true,
          feature: {
            //让其可以作为图片保存下来
            saveAsImage: {
              show: true,
            },
          },
        },
      });
    },
    getPieSeries() {
      this.$axios.get("/dataAnalysis/getPieSeries").then((respData) => {
        console.log(respData);
        const resp = respData.data.data;
        let data = resp.map((item) => ({
          name: item.dtype,
          value: item.proportion,
        }));
        this.initPie(data);
      });
    },
    initPie(pieData) {
      let pieecharts = echarts.init(document.getElementById("pie"));
      pieecharts.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          color: "rgba(255,255,255,0.7)",
          fontSize: "10px",
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "设备类型比重",
            type: "pie",
            radius: "50%",
            label: {
              formatter: "{b}: {d}%",
            },
            data: pieData,

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    grtLineSeries2() {
      this.$axios.get("/dataAnalysis/getCircleSeries").then((respData) => {
        console.log(respData);
        const resp = respData.data.data;
        let xdata = resp.map((item) => item.checktime);
        let ydatas = resp.map((item) => item.data);
        let ydata0 = ydatas.map((item) => item[0]);
        let ydata1 = ydatas.map((item) => item[1]);
        let ydata2 = ydatas.map((item) => item[2]);
        let ydata3 = ydatas.map((item) => item[3]);
        let ydata = [];
        ydata.push(ydata0);
        ydata.push(ydata1);
        ydata.push(ydata2);
        ydata.push(ydata3);

        this.initLine2(xdata, ydata);
      });
    },
    initLine2(xdata, ydata) {
      console.log(ydata);
      let lineecharts2 = echarts.init(document.getElementById("line2"));
      lineecharts2.setOption({
        color: ["#80FFA5", "#00DDFF", "#FF0087", "#FFBF00"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["未损耗", "一级损耗", "二级损耗", "三级损耗"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xdata,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "未损耗",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: ydata[0],
          },
          {
            name: "一级损耗",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: ydata[1],
          },
          // {
          //   name: "二级损耗",
          //   type: "line",
          //   stack: "Total",
          //   smooth: true,
          //   lineStyle: {
          //     width: 0,
          //   },
          //   showSymbol: false,
          //   areaStyle: {
          //     opacity: 0.8,
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       {
          //         offset: 0,
          //         color: "rgb(55, 162, 255)",
          //       },
          //       {
          //         offset: 1,
          //         color: "rgb(116, 21, 219)",
          //       },
          //     ]),
          //   },
          //   emphasis: {
          //     focus: "series",
          //   },
          //   data: ydata[2],
          // },
          {
            name: "二级损耗",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 0, 135)",
                },
                {
                  offset: 1,
                  color: "rgb(135, 0, 157)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: ydata[2],
          },
          {
            name: "三级损耗",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgb(224, 62, 76)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: ydata[3],
          },
        ],
      });
    },
  },
  mounted() {
    this.getLineSeries1();
    this.getPieSeries();
    this.grtLineSeries2();
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}

.dataview {
  background-color: #07080a;
}

.topbox {
  width: 100%;
  height: 80px;
  background: url("../../assets/image/head_bg.png");
  background-size: 100% 100%;
}

.topbox h1 {
  text-align: center;
  color: #fff;
  font-size: 30px;
  line-height: 60px;
}

.middlebox {
  width: 100%;
  height: 330px;
  /* 弹性布局
  display: flex;
  /* 弹性布局方向-水平布局 */
  /* flex-direction: row;  */
}
.middlebox .row0 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 30px;
}
.middlebox .row0 .title {
  flex: 3;
  /* border: 1px solid rgba(25, 186, 139, 0.1); */
  height: 30px;
  position: relative;
}
.middlebox .row0 .title h1 {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.middlebox .row {
  display: flex;
  flex-direction: row;
}

.middlebox .row .panel {
  border: 1px solid rgba(25, 186, 139, 0.1);
  background: rgba(255, 255, 255, 0.07) url("../../assets/image/line.png");
  margin: 5px;
  height: 280px;
  position: relative;
}

.middlebox .row .panel:nth-child(1) {
  flex: 3;
  /* background-color: #02a6b5; */
}

.middlebox .row .panel:nth-child(2) {
  flex: 3;
  /* background-color: gold; */
}
.middlebox .row .panel:nth-child(3) {
  flex: 3;
  /* background-color: #02a6b5; */
}

.middlebox .row .panel::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 0;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.middlebox .row .panel::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  top: 0;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.middlebox .row .panel .chart {
  width: 100%;
  height: 320px;
}

.middlebox .row .panel .panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.middlebox .row .panel .panel-footer::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.middlebox .row .panel .panel-footer::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.bottombox {
  width: 100%;

  height: 450px;
  background: rgba(101, 132, 226, 0.1);
}
.bottombox .buttom-title {
  margin-top: 20px;
  padding-top: 50px;
}
.bottombox .buttom-title h1 {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.bottombox .buttom-row {
  margin-top: 20px;
  width: 100%;
  height: 350px;
  display: flex;
  flex-direction: row;
}
.bottombox .buttom-row .space {
  flex: 2.5;
  /* background-color: gold; */
}
.bottombox .buttom-row .bottom-panel {
  flex: 5;
  border: 1px solid rgba(25, 186, 139, 0.1);
  background: rgba(255, 255, 255, 0.03) url("../../assets/image/line.png");
  position: relative;
}
.bottombox .buttom-row .bottom-panel .buttom-chart {
  width: 100%;
  height: 320px;
}
</style>